<script setup lang='ts'>
import { computed,ref } from 'vue'
import { NAvatar,NPopover } from 'naive-ui'
import { useUserStore } from '@/store'
import defaultAvatar from '@/assets/avatar.jpg'
import { isString } from '@/utils/is'
import {UserInfo} from "@/typings/user"
import {getUserInfo} from "@/api/user"
import {record} from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
const userStore = useUserStore()
const { isMobile } = useBasicLayout()
const userInfo = computed(() => userStore.userInfo)

function showUserInfo() {
		alert("//todo 用户信息")
}

function showUserMoney() {
    showRecord.value = !showRecord.value;
}
const showRecord = ref(false)

</script>

<template>
  <div   v-if=" userInfo && userInfo.id" class="flex items-center overflow-hidden">
    <div class="flex-1 min-w-0 ml-2">
      <h2 @click="showUserInfo" class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
				<n-popover trigger="hover">
					<template #trigger>
						账号:{{ userInfo.account ?? "小可爱" }}
					</template>
					<n-button @click="showUserInfo" >点击查看用户信息</n-button>
				</n-popover>
      </h2>
			<h2 @click="showUserMoney" class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
<!--				model-3.5 torbo次数:{{userInfo.gptApiTokenVo.visitNumber}}<br>-->
				我的额度:{{userInfo.gptApiTokenVo.balanceStr}}美元
				<br>
				<n-popover trigger="hover">
					<template #trigger>
						我的账单（充值）
					</template>
					<n-button @click="showUserMoney" >点击查看账单</n-button>
				</n-popover>
			</h2>
    </div>
  </div>
	<record   v-model:visible="showRecord"  />
</template>
<!-- 描述 -->
<!--      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">-->
<!--        <span-->
<!--          v-if="isString(userInfo.description) && userInfo.description !== ''"-->
<!--          v-html="userInfo.description"-->
<!--        />-->
<!--      </p>-->
